<!DOCTYPE html>
<html>
	<head>
		<title>MapSketcher</title>
    <link rel="stylesheet" href="/css/jquery.mobile.css" />
    <link rel="stylesheet" href="/css/application.css" />
    <link rel="stylesheet" href="/css/CssButtons.css" />
    <link rel="stylesheet" href="/css/github-voice.css" />
    <script type="text/javascript"
      src="http://www.google.com/maps/api/js?v=3.3&sensor=false"></script>
    <script type="text/javascript" src="/socket.js"></script>
	<!-- Libreria para realizar drag and drop desde cualquier dispositivo--->
	<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
    <!--<script type="text/javascript" src="/js/webkitdragdrop.js"></script>-->
    <script type="text/javascript" src="/js/utils.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.mobile.js"></script>
    <script type="text/javascript" src="/js/jquery.tools.js"></script>
    <!--<script type="text/javascript" src="/js/jquery.touchScrollable.js"></script>-->
    <script type="text/javascript" src="/js/jquery.github-voice.js"></script>
    <script type="text/javascript" src="/js/underscore.js"></script>
	<script type="text/javascript" src="/js/models/DPR.js"></script>
    <script type="text/javascript" src="/js/models/room.js"></script>
    <script type="text/javascript" src="/js/models/map.js"></script>
    <script type="text/javascript" src="/js/models/sketch.js"></script>
    <script type="text/javascript" src="/js/models/polyline.js"></script>
    <script type="text/javascript" src="/js/models/marker.js"></script>
    <script type="text/javascript" src="/js/models/pointer.js"></script>
    <script type="text/javascript" src="/js/models/overlay.js"></script>
    <script type="text/javascript" src="/js/models/canvas.js"></script>
    <script type="text/javascript" src="/js/models/workspace.js"></script>
    <script type="text/javascript" src="/js/map_sketcher_client.js"></script>
    <script type="text/javascript" src="/js/application.js"></script>
	<!--Sliders-->
	<!--<script type="text/javascript" src="/js/models/sliders.js"></script>-->
	</head>
  <body class="yui3-skin-sam">
    <div id="wrapper" >
    <div id="toolbar">	
		<div id = "toggleModeButton" class = "btnMap"></div>
	        <!--<input id="toggleModeButton" type="button" value = "Switch Mode"/>-->
			<!--<a href="#" rel="#collaborativeRoomSelection" data-role="button">Collaborative Room</a>-->
			<!--<a href="#" rel="#clearButton" data-role="button">Clear</a>-->
		         
		<div id = "toolbar_centerUp" style = "display:none">
			
			<div class = "block">
				<div id = "btnColor" class = "btnListMap"></div>
				<ul id = "listColor" class = "dropdownmenu" style="display:none">
					<li><img id = "btnGreen" src="./css/images/green.png"/></li>
					<li><img id = "btnRed" src="./css/images/red.png"/></li>
					<li><img id = "btnBlue" src="./css/images/blue.png"/></li>
				</ul>
			</div>
			<div class = "block">
				<div id = "btnSketch" class = "btnListMap"></div>
				<ul id = "listSketch" class = "dropdownmenu" style="display:none">
					<li><img id = "btnSlim" src="./css/images/slim.png"/></li>
					<li><img id = "btnNormal" src="./css/images/normal.png"/></li>
					<li><img id = "btnFat" src="./css/images/fat.png"/></li>
				</ul>
			</div>
		</div>
      </div>
      <a href="#" id="feedback"></a>
      <div id="workspace" data-role="content">
      	<div id="layer">
        	<div id="map"></div>
		</div>
        <div id="sketches"></div>
      </div>
      <div id="rooms">
        <div id="personal" class="space">
			<div id = "personalAdd" class = "roomAdd"></div>
			<div id = "personalDelete" class ="roomDelete"></div>
        </div>
        <div id="collaborative" class="room space">
			<div id = "collaborativeAdd" class ="roomAdd">
				<a href="#" rel="#collaborativeRoomSelection" data-role="button">plus</a></div>
			<div id = "collaborativeDelete" class ="roomDelete"></div>
        </div>
        <div id="globalRoom" class="room space">
			<div id = "globalAdd" class ="roomAdd"></div>
			<div id = "globalDelete" class ="roomDelete"></div>
		</div>
      </div>
    </div>

    <div id="collaborativeRoomSelection" class="overlay" data-role="page">
      <div style="width: 95%;" data-role="header" data-theme="e" data-position="inline" class="ui-bar ui-bar-a ui-header"> 
        <h1>Choose your Colaborative Room</h1> 
      </div> 

      <div data-role="content" data-theme="e"> 
        <br />
        <br />
        <br />
        <br />
        
        <form action="">
          <div data-role="fieldcontain"> 
            <label for="name">Room Name:</label> 
            <input type="text" name="name" id="name" value=""  /> 
          </div> 

          <div class="ui-body ui-body-b"> 
            <fieldset class="ui-grid-a"> 
              <div class="ui-block-a cancel"><button type="submit" data-theme="d">Cancel</button></div> 
              <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>	   
            </fieldset> 
          </div> 
          
        	
        </form>
      </div> 
    </div>
	
  </body>
</html> 
